<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>

  用户名：<input type="text" class="username"><br>
  密码：<input type="text" class="password"><br>
  <input type="checkbox" class="remeber">是否记住账号密码
  <input type="button" value="登录" class="btn">
  
</body>
<script src="./cookie.js"></script>
<script>

  class Remeber{
    constructor(){
      // 1. 选择器
      this.un = document.querySelector(".username");
      this.pw = document.querySelector(".password");
      this.rmb = document.querySelector(".remeber");
      this.btn = document.querySelector(".btn");
      // 2. 初始立即读取本地存储
      this.getData();
      // 3. 绑定事件
      this.addEvent();
    }
    addEvent(){
      const that = this;
      this.btn.onclick = function(){
        // 4. 获取复选框选中状态
        that.isRmb = that.rmb.checked;
        // 5. 存储用户信息
        that.remeber();
      }
    }
    remeber(){
      if(this.isRmb){
        // 根据复选框状态存储用户信息
        cookie.set("username", this.un.value, {
          expires:7
        })
        cookie.set("password", this.pw.value, {
          expires:7
        })
      }
    }
    getData(){
      // 读取本地存储，并填充表单
      this.un.value = cookie.get("username") || "";
      this.pw.value = cookie.get("password") || "";
    }
  }
  new Remeber;


</script>
</html>